<template>
  <div :class="{ active: selectWidget && selectWidget.key === element.key && isPreView, cursor: isPreView, 'widget-view-card': isPreView, 'drag-widget': isPreView }" @click="handleSelectWidget(element, $event)">
    <el-form-item
      v-if="element && element.key"
      :ref="`formItem-${element.key}`"
      :rules="!isDetail && element.options && element.options.required?[{ required: true,validator: validatorFun, trigger: 'change' }]:[]"
      :label="!element.options.isHideField ? element.name : null"
      :class="itemClass"
      prop="value"
    >
      <div
        v-if="!element.options.isHideField"
        slot="label"
        :title="element.name"
        :class="{
          'grey-label': isDetail,
          'width-require': element.options.required,
        }"
        class="flex-label-name">
        <span class="inner-name">{{ element.name }}</span>
        <span v-if="isDetail">:</span>
        <tipIcon v-if="element.options.tip" :content="element.options.tip" :style="!showMobilePage?{marginLeft: '4px'}:{verticalAlign: 'middle'}" />
      </div>
      <FormMakeElement
        :is-in-detail="isInDetail"
        :is-detail="isDetail"
        :element="element"
        :is-pre-view="isPreView"
        style="max-width: 100%"
        @changeValueData="changeValueData"
        @clearValidate="clearValidate"/>
    </el-form-item>
    <!-- 操作 -->
    <template v-if="isPreView">
      <div v-if="element.type !== 'subform' && element.type !== 'linkForm'" class="form-mask" />
      <div v-if="selectWidget && selectWidget.key == element.key" :class="{bottom: ['subform', 'linkForm', 'associatedApproval'].includes(element.type)}" class="widget-view-action">
        <img :src="copyIcon" class="icon" alt="复制" @click.stop="handleWidgetClone(element)">
        <img :src="deleteIcon" class="icon" alt="删除" @click.stop="handleWidgetDelete(element)">
      </div>
    </template>
  </div>

</template>

<script>
import { mapState } from 'vuex';

import FormMakeElement from '../FormMakeElement';

import copyIcon from '@/assets/auditProcess/copy_form.png';
import deleteIcon from '@/assets/auditProcess/delete_form.png';

export default {
  name: 'TableCardView',
  components: {
    FormMakeElement
  },
  props: {
    element: {
      type: Object,
      default: null
    },
    isPreView: { // 是否配置中
      type: Boolean,
      default: false
    },
    isDetail: { // 是否详情页展示
      type: Boolean,
      default: false
    },
    isInDetail: { // 是否详情页展示，isDetail可能因为事件而改变，导致实际在详情页而 isDetail 为false，这个属性不会改变，详情页永远为true
      type: Boolean,
      default: false
    }
  },
  data() {
    const validatorFun = () => {
      return (rule, value, callback) => {
        if (this.isPreView) callback();

        const element = this.element;
        const isDisabled = element.options ? element.options.disabled : false;
        let data = element.value;
        const msg = `${element.name}为必填`;
        const arrVal = Array.isArray(data) && data.length === 0;
        let richeditorValidate;
        if (element.type === 'richEditor') {
          richeditorValidate = element.options.readonly ? false : data === '<p><br></p>' || data === '';
          if (data === '') {
            data = '<p><br></p>';
          }
        }
        if (!isDisabled && !data && data !== 0 || arrVal || JSON.stringify(data) === '{}' || richeditorValidate) {
          callback(new Error(msg));
        } else {
          callback();
        }
      };
    };
    return {
      validatorFun: validatorFun(),
      copyIcon, deleteIcon,
      inInit: true
    };
  },
  computed: {
    ...mapState({
      'selectWidget': state => state.formMake.selectWidget,
      'showMobilePage': state => state.app.showMobilePage
    }),
    itemClass() {
      return {
        'mb0': this.isDetail,
        'hide-label': this.element.options.isHideField,
        'inline-item': !this.showMobilePage,
        'mobile-item': this.showMobilePage,
        'mobile-richEditor': this.element.type === 'richEditor' && this.showMobilePage && !this.isDetail
      };
    }
  },
  methods: {
    handleSelectWidget(element, e) {
      if (!this.isPreView) return;
      e.stopPropagation();
      this.$store.dispatch('setSelectWidget', element);
    },
    handleWidgetClone(element) {
      this.$emit('handleWidgetClone', element);
    },
    handleWidgetDelete(element) {
      this.$emit('handleWidgetDelete', element);
    },
    clearValidate(key) {
      if (this.$refs[`formItem-${key}`]) {
        this.$refs[`formItem-${key}`].clearValidate();
      }
    },
    changeValueData(element) {
      this.$emit('changeValueData', element);
    }
  }
};
</script>
<style lang="scss" scoped>
.widget-view-card {
  padding: 10px 0;
  position: relative;
  // border: 1px dashed rgba(170,170,170,.7);
  background-color: #fff;
  margin: 0px;
  &:hover {
    background-color: #EFF3FB;
  }
  &.active {
    background-color: #EFF3FB;
  }
  .form-mask {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    height: 100%;
    width: 100%;
  }
  &.cursor {
    cursor: pointer;
  }
  &::v-deep {
    .el-form-item {
      margin-bottom: 0;
    }

  }
  .widget-view-action{
    position: absolute;
    right: 28px;
    top: 12px;
    height: 28px;
    line-height: 28px;
    z-index: 9;
    display: flex;
    .icon {
      margin-left: 12px;
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    &.bottom {
      bottom: 12px;
      top: auto;
    }
    .font13 { font-size: 13px; }
    .font14 { font-size: 14px !important; }
  }
  .drag-widget {
    cursor: move;
  }
}
.grey-label {
  color: #999;
}
.title-container {
  white-space: nowrap;
  margin-right: 20px;
  margin-top: 8px;
}
.mb10 {
  margin-bottom: 10px;
}
.mt10 {
  margin-top: 10px;
}
.mb0 {
  margin-bottom: 0;
}
.hide-label {
  &::v-deep {
    .el-form-item__content {
      margin-left: 0 !important;
    }
  }
}
.inline-item {
  .inner-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .flex-label-name {
    display: flex;
    align-items: center;
    max-width: 100%;
    &.width-require {
      max-width: calc(100% - 11px);
    }
  }
  &::v-deep {
    .el-form-item__label {
      display: flex;
      align-items: center;
    }
  }
}
.mobile-item {
  display: flex;
  align-items: center;
  &::v-deep {
    .el-form-item__label {
      display: flex;
      line-height: 1 !important;
    }
    .el-form-item__content {
      flex: 1;
      margin: 0 !important;
    }
  }
}
</style>
